<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";
// require('echarts/theme/macarons')
export default {
  name: 'Data',
  data() {
    return {
      status0:"未审核",
      status1:"审核中",
      status2:"已审核",
      xData: ["互金一班", "互金二班"], //横坐标
      yData1: [23, 24], //数据
      yData2: [3, 4],//数据
      yData3: [2, 2],//数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
        this.start();
  },
  methods: {

    async start () {
      await this.$axios.get('http://localhost:/classDis/getAllClass').then(async res => {
        // console.log(res.data);
        console.log(window.sessionStorage)
        this.xData = res.data;
        // this.yData1 = [];
        this.yData2 = [];
        this.yData3 = [];
        for (var i = 0; i < this.xData.length; i++) {
          //  await this.$axios.post(`http://localhost:/classDis/getNum/${this.status0}&${this.xData[i]}`).then(res => {
          //
          //   this.yData1.push(res.data);
          // })
          await this.$axios.post(`http://localhost:/classDis/getNum/${this.status1}&${this.xData[i]}`).then(res => {
            // console.log(res.data);
            // this.yData2.push(res.data);
             this.yData2.push(res.data)
          })
          await this.$axios.post(`http://localhost:/classDis/getNum/${this.status2}&${this.xData[i]}`).then(res => {
            // console.log(res.data);
            this.yData3.push(res.data);
          })
          this.initEcharts();
        }
      });


      ;
      // console.log(this.yData1)
      // console.log(this.yData2)
      // console.log(this.yData3)
    },

    initEcharts() {
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      // console.log(this.yData1)
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const myChart = echarts.init(document.getElementById("mychart"));
        // console.log(this.yData2)
        // 基本柱状图
        const option = {
          legend:{
            itemGap: 50,
            itemWidth:15,
            itemHeight:15,
            data:['未审核','审核中','已审核'],
            bottom:'bottom',
            textStyle: { color: "#000" }
          },
          xAxis: {
            data: this.xData
          },
          yAxis: {},
          series: [
            // {
            //   name: '未审核',
            //   type: "bar", //形状为柱状图
            //   stack:'班级情况',
            //   data: this.yData1,
            //   itemStyle:{
            //     normal:{color:"#FF8849"},
            //   },
            //   barWidth : 30,//柱图宽度
            // },
            {
              name: '审核中',
              type: "bar", //形状为柱状图
              stack:'班级情况',
              data: this.yData2,
              itemStyle:{
                normal:{color:"#3FBB49"},
              },
              barWidth : 30,//柱图宽度
            },
            {
              name: '已审核',
              type: "bar", //形状为柱状图
              stack:'班级情况',
              data: this.yData3,
              itemStyle:{
                normal:{color:"#6d67bb"},
              },
              barWidth : 30,//柱图宽度
            }
          ]
        };


        const option1={
          color: [
            // '#2777EC',
            // '#2EACFF',
            '#FFA61C',
            // '#2EC054',
            // '#F28685',
            '#8C64D7'
          ],
            legend: {
            show: true,
              right: '5%',
              itemWidth: 10,
              itemHeight: 8
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            x: '7%',
              y: '15%',
              x2: '3%',
              y2: '15%'
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(151, 151, 151, 1)'
                }
              },
              axisLabel: {
                show: true,
                // margin: 20,
                textStyle: {
                  color: '#000'
                }
              },
              axisTick: {
                show: false
              },
              // boundaryGap: true,
              data: this.xData
            }
          ],

            yAxis: [
            {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(151, 151, 151, 1)'
                }
              },
              axisLabel: {
                show: true,
                // margin: 20,
                textStyle: {
                  color: '#000'
                }
              },
              axisTick: {
                show: true,
                color: 'rgba(151, 151, 151, 1)'
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(226, 232, 236, 1)',
                  type: 'dashed'
                }
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ['#fff', 'rgba(245, 246, 250, 1)']
                }
              }
            }
          ],
            series: [
            // {
            //   name: '未审核',
            //   type: 'bar',
            //   smooth: false,
            //   barWidth: 18,
            //   // showSymbol: false,/
            //   symbolSize: 18,
            //   zlevel: 3,
            //   lineStyle: {
            //     normal: {
            //       color: '#157DFF'
            //     }
            //   },
            //   data: this.yData1
            // },
            {
              name: '审核中',
              barWidth: 18,
              type: 'bar',
              smooth: false,
              // showSymbol: false,
              symbolSize: 18,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: '#5FD77E'
                }
              },
              data: this.yData2
            },
            {
              name: '已审核',
              barWidth: 18,
              type: 'bar',
              smooth: false,
              symbolSize: 18,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: '#F7B500'
                }
              },
              data: this.yData3
            },
          ]
        };

        myChart.setOption(option1);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });


      })


    }

  }
};
</script>

